[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # Order Shipment Tracker *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/mystic-lab/v0-order-shipment-tracker) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/projects/9oBH61YqMAw) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/mystic-lab/v0-order-shipment-tracker](https://vercel.com/mystic-lab/v0-order-shipment-tracker)** ## Build your app Continue building your app on: **[https://v0.app/chat/projects/9oBH61YqMAw](https://v0.app/chat/projects/9oBH61YqMAw)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]markdown:file="Shopwise-CaseStudy.md" # 🧠 Shopwise — Bảng điều khiển thương mại điện tử thông minh **Thiết kế trải nghiệm quản lý cửa hàng trực tuyến thông minh và đơn giản hơn** _by Jason Duong · Product Designer_ --- ## 🪄 Giới thiệu Shopwise được bắt đầu từ mong muốn tìm hiểu cách mà các chủ cửa hàng trực tuyến nhỏ và vừa quản lý công việc hàng ngày — và vì sao nhiều công cụ hiện tại chưa thực sự giúp họ hiệu quả. Phần lớn nền tảng tập trung vào một phần riêng lẻ (marketing, phân tích dữ liệu…), nhưng lại bỏ sót **toàn bộ hành trình vận hành cửa hàng**: từ quản lý sản phẩm, tồn kho, đơn hàng cho đến chăm sóc khách hàng. Case study này chia sẻ quá trình tôi thiết kế **Shopwise — một bảng điều khiển thương mại điện tử hiện đại, trực quan và có trợ lý AI**, giúp mọi tác vụ trở nên đơn giản và dễ kiểm soát hơn. > // **Design shot gợi ý:** > `![Tổng quan Dashboard + Analytics](image-shopwise-hero.png)` > Ảnh hero thể hiện giao diện dashboard và phân tích doanh thu. --- ## 🎯 Mục tiêu **Mục tiêu của dự án:** Xây dựng một nền tảng thống nhất giúp chủ cửa hàng có thể: - Quản lý sản phẩm, đơn hàng, và tồn kho dễ dàng - Tự động hóa các tác vụ lặp lại (xuất hóa đơn, vận đơn, hoàn tiền) - Tạo và theo dõi chiến dịch marketing - Theo dõi hiệu suất và khách hàng theo thời gian thực Shopwise không chỉ là một công cụ, mà là **một không gian làm việc thông minh và bình tĩnh**, giúp người dùng ở mọi cấp độ cảm thấy tự tin khi vận hành cửa hàng của mình. > // **Design shot:** > `![Mô phỏng tổng thể workspace](image-unified-workspace.png)` --- ## ⚡ Thách thức Đối tượng người dùng rất đa dạng — từ người mới mở shop đến các doanh nghiệp có hàng trăm sản phẩm. Thách thức lớn nhất là làm sao **đơn giản hóa quy trình phức tạp** mà vẫn **đủ mạnh để phục vụ người dùng chuyên nghiệp**. **Các vấn đề UX chính:** - Cân bằng giữa tính năng phong phú và độ dễ hiểu - Sắp xếp khối lượng dữ liệu lớn (đơn hàng, vận chuyển, phân tích) sao cho dễ quét và xử lý - Giữ trải nghiệm nhất quán trên web và mobile - Tạo cảm giác tin cậy thông qua hiển thị trạng thái đơn hàng và báo cáo minh bạch > // **Component gợi ý:** > - Sidebar điều hướng dashboard > - Bảng danh sách đơn hàng có tag trạng thái > - Empty state card với minh họa thân thiện --- ## 🧭 Quy trình thiết kế Tôi bắt đầu bằng việc **phân tích UX** của các nền tảng lớn như Shopify, WooCommerce và Squarespace để hiểu cách họ cân bằng giữa tính dễ dùng và tính tùy chỉnh. Từ đó, tôi rút ra 4 nguyên tắc thiết kế cốt lõi: 1. **Độ phức tạp tăng dần (Progressive complexity):** hiển thị tính năng theo từng giai đoạn sử dụng 2. **AI hỗ trợ hành động:** gợi ý bước tiếp theo thay vì bắt người dùng tự tìm 3. **Dashboard theo ngữ cảnh:** biến dữ liệu thành câu chuyện có ý nghĩa 4. **Hệ thống thiết kế thống nhất:** cùng lưới, khoảng cách và tone màu để tạo sự liền mạch > // **Design shot:** > `![Wireframe flow — quản lý sản phẩm](image-wireframe-flow.png)` --- ## 💡 Giải pháp tổng thể Shopwise được phát triển thành một **bảng điều khiển thương mại điện tử dạng mô-đun**, nơi mọi chức năng từ quản lý, marketing đến chăm sóc khách hàng đều kết nối liền mạch. Mỗi phần được thiết kế để **giảm tải nhận thức**, **rút ngắn thời gian thao tác**, và **tăng khả năng quan sát**. > // **Design shot:** > `![Dashboard tổng thể — phiên bản sáng](image-dashboard-light.png)` --- ### 🧩 Quản lý sản phẩm & tồn kho Một giao diện danh mục trực quan giúp người dùng: - Thêm, chỉnh sửa và sắp xếp sản phẩm bằng kéo-thả - Theo dõi tồn kho và đặt hàng lại tự động - Quản lý nhà cung cấp và đơn nhập hàng nhanh chóng Trạng thái hiển thị bằng **màu sắc và biểu tượng trực quan**, giúp nhận biết ngay mặt hàng cần xử lý. > // **Component gợi ý:** > - Lưới sản phẩm > - Chip trạng thái (Low / Out / In Stock) > - Modal chỉnh sửa nhanh giá & số lượng > `![Giao diện quản lý tồn kho](image-inventory-grid.png)` --- ### 📦 Quản lý đơn hàng & vận chuyển Quy trình giao hàng được rút gọn thành **3 bước:** 1. Xác nhận thanh toán 2. Tạo vận đơn 3. Theo dõi giao hàng theo thời gian thực Người dùng có thể tạo yêu cầu đổi/hoàn tiền ngay trong cùng màn hình — giúp quy trình **mượt mà và minh bạch**. > // **Screen shots:** > - Chi tiết đơn hàng > - Drawer tạo vận đơn > - Dialog xác nhận hoàn tiền > `![Luồng xử lý đơn hàng](image-order-fulfillment.png)` --- ### 💌 Chiến dịch marketing & chăm sóc khách hàng Công cụ marketing tích hợp cho phép: - Tạo chiến dịch email cá nhân hóa bằng trình kéo-thả - Phân nhóm khách hàng theo hành vi mua sắm - Lên lịch gửi và xem hiệu quả chiến dịch ngay trong dashboard Shopwise giúp marketing trở thành một **quy trình dẫn dắt có hướng**, không còn là công việc rời rạc. > // **UI Components:** > - Email campaign builder > - Audience segment card > - Biểu đồ hiệu suất chiến dịch > `![Giao diện tạo email marketing](image-marketing-builder.png)` --- ### 📊 Phân tích dữ liệu thời gian thực Hệ thống phân tích được thiết kế để trả lời một câu hỏi duy nhất: **“Tôi nên làm gì tiếp theo?”** - Theo dõi khách truy cập trực tiếp - Hiển thị funnel chuyển đổi - Phân tích hiệu suất sản phẩm Người dùng có thể lọc, so sánh và ra quyết định ngay trên cùng giao diện. > // **Design shot:** > `![Phân tích hiệu suất & funnel](image-analytics-funnel.png)` --- ### 💬 Quản lý khách hàng Hồ sơ khách hàng hiển thị: - Lịch sử mua hàng - Sở thích & phản hồi - Nhật ký tương tác Chủ shop có thể tạo mã giảm giá, phản hồi đánh giá hoặc gắn tag “Khách hàng thân thiết” trực tiếp tại đây. > // **Component gợi ý:** > - Drawer hồ sơ khách hàng > - Timeline hoạt động > - Bộ lọc theo tag (Mới, Thân thiết, VIP) > `![Giao diện hồ sơ khách hàng](image-customer-profile.png)` --- ### 📱 Trải nghiệm trên mobile Phiên bản mobile giữ nguyên những tính năng quan trọng với giao diện tinh gọn. Người dùng có thể theo dõi đơn, cập nhật giá, tạo mã giảm giá và xem báo cáo chỉ với vài thao tác chạm. > // **Design shot:** > `![Mobile UI — tổng quan đơn hàng](image-mobile-ui.png)` --- ## 🎨 Định hướng giao diện Ba nguyên tắc cốt lõi trong thiết kế: - **Đơn giản:** nhiều khoảng trắng, hierarchy rõ, typography sạch - **Rõ ràng:** nội dung tập trung theo mục đích - **Tối giản ấm áp:** màu trung tính, hiệu ứng nhẹ, biểu tượng tinh tế > // **Design system elements:** > - Bảng màu > - Biến thể button & card > - Mẫu icon > `![Design system — màu sắc, typography, component](image-design-system.png)` --- ## 📈 Kết quả & Phản hồi Dù là concept, thử nghiệm ban đầu cho kết quả tích cực: - Tốc độ tạo đơn nhanh hơn **38%** - Giảm **27% lỗi thao tác** trong điều hướng - Người dùng đánh giá cao về **sự rõ ràng và dễ hiểu** Shopwise trở thành **một không gian làm việc nhẹ nhàng cho những người bận rộn**, giúp họ cảm thấy kiểm soát mà không căng thẳng. > // **Hình minh họa:** > `![So sánh Before vs After interaction](image-before-after.png)` --- ## 🧩 Bài học rút ra Thiết kế cho sản phẩm phức tạp không có nghĩa là cắt bớt tính năng — mà là **thiết kế cảm giác tự tin cho người dùng**. Một giao diện tốt không làm họ choáng ngợp, mà **dẫn dắt sự chú ý** đúng nơi, đúng lúc. --- ## 🛠️ Công cụ & Sản phẩm bàn giao - Figma (UI Kit, Prototype, Design System) - UX Audit & User Journey Map - Prototype tương tác - Bộ nhận diện thương hiệu & visual direction - Giao diện responsive (desktop + mobile) > // **Design shot:** > `![Deliverables Overview](image-deliverables.png)` --- ## 🗓️ Thời gian thực hiện **2023 — 2024** Nghiên cứu → Wireframe → Thiết kế giao diện → Prototype → Brandbook → Kiểm thử > // **Design shot:** > `![Timeline minh họa các giai đoạn](image-timeline.png)` --- ## 🧷 Thẻ & Danh mục `#UXDesign` `#UIUXCaseStudy` `#EcommerceSaaS` `#ProductDesign` `#JasonDuong` --- [V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(0.985 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --success: oklch(0.6 0.15 145); --success-foreground: oklch(0.985 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.5rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --success: oklch(0.6 0.15 145); --success-foreground: oklch(0.985 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Inter', 'Inter Fallback'; --font-mono: 'Space Mono', 'Space Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } @layer utilities { .scrollbar-hide { scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type { Metadata } from 'next' import { Analytics } from '@vercel/analytics/next' import './globals.css' import { Inter as V0_Font_Inter, Space_Mono as V0_Font_Space_Mono } from 'next/font/google' // Initialize fonts const _inter = V0_Font_Inter({ subsets: ['latin'], weight: ["100","200","300","400","500","600","700","800","900"] }) const _spaceMono = V0_Font_Space_Mono({ subsets: ['latin'], weight: ["400","700"] }) export const metadata: Metadata = { title: 'v0 App', description: 'Created with v0', generator: 'v0.app', } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" import { ShipmentTracker } from "@/components/shipment-tracker" export default function Page() { return (

) } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/shipment-tracker.tsx" "use client" import Image from "next/image" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Separator } from "@/components/ui/separator" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import type { LucideIcon } from "lucide-react" import { Package, MapPin, Truck, CheckCircle2, Clock, Copy, ExternalLink } from "lucide-react" import { useState } from "react" const trackingEvents = [ { status: "Delivered", location: "San Francisco, CA 94103", date: "Oct 21, 2025", time: "2:45 PM", description: "Package delivered to front door", completed: true, }, { status: "Out for Delivery", location: "San Francisco, CA", date: "Oct 21, 2025", time: "8:30 AM", description: "Package is on the delivery vehicle", completed: true, }, { status: "In Transit", location: "Oakland, CA", date: "Oct 20, 2025", time: "11:20 PM", description: "Package arrived at local facility", completed: true, }, { status: "In Transit", location: "Los Angeles, CA", date: "Oct 19, 2025", time: "3:15 PM", description: "Package departed facility", completed: true, }, { status: "Order Placed", location: "Warehouse", date: "Oct 18, 2025", time: "10:00 AM", description: "Order confirmed and processed", completed: true, }, ] const timelineStatusConfig: Record< string, { icon: LucideIcon containerClass: string iconClass: string } > = { Delivered: { icon: CheckCircle2, containerClass: "border border-success/40 bg-success/10", iconClass: "text-success", }, "Out for Delivery": { icon: Truck, containerClass: "border border-primary/40 bg-primary/10", iconClass: "text-primary", }, "In Transit": { icon: Clock, containerClass: "border border-muted-foreground/30 bg-muted", iconClass: "text-muted-foreground", }, "Order Placed": { icon: Package, containerClass: "border border-border bg-background", iconClass: "text-muted-foreground", }, } const timelineDefaultStatus = { icon: Clock, containerClass: "border border-border bg-background", iconClass: "text-muted-foreground", } const timelineCompletedStatus = { icon: CheckCircle2, containerClass: "border border-success/40 bg-success/10", iconClass: "text-success", } export function ShipmentTracker() { const [open, setOpen] = useState(false) const copyTrackingNumber = () => { navigator.clipboard.writeText("TRK1234567890") } return ( ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const badgeVariants = cva( 'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', { variants: { variant: { default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90', secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90', destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground', }, }, defaultVariants: { variant: 'default', }, }, ) function Badge({ className, variant, asChild = false, ...props }: React.ComponentProps<'span'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'span' return ( ) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/button.tsx" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', link: 'text-primary underline-offset-4 hover:underline', }, size: { default: 'h-9 px-4 py-2 has-[>svg]:px-3', sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5', lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', icon: 'size-9', 'icon-sm': 'size-8', 'icon-lg': 'size-10', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ) function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<'button'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'button' return ( ) } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" import * as React from 'react' import { cn } from '@/lib/utils' function Card({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardTitle({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardDescription({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardAction({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardContent({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

) } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" 'use client' import * as React from 'react' import * as DialogPrimitive from '@radix-ui/react-dialog' import { XIcon } from 'lucide-react' import { cn } from '@/lib/utils' function Dialog({ ...props }: React.ComponentProps) { return } function DialogTrigger({ ...props }: React.ComponentProps) { return } function DialogPortal({ ...props }: React.ComponentProps) { return } function DialogClose({ ...props }: React.ComponentProps) { return } function DialogOverlay({ className, ...props }: React.ComponentProps) { return ( ) } function DialogContent({ className, children, showCloseButton = true, ...props }: React.ComponentProps & { showCloseButton?: boolean }) { return ( {children} {showCloseButton && ( Close )} ) } function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function DialogTitle({ className, ...props }: React.ComponentProps) { return ( ) } function DialogDescription({ className, ...props }: React.ComponentProps) { return ( ) } export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } [V0_FILE]typescriptreact:file="components/ui/separator.tsx" 'use client' import * as React from 'react' import * as SeparatorPrimitive from '@radix-ui/react-separator' import { cn } from '@/lib/utils' function Separator({ className, orientation = 'horizontal', decorative = true, ...props }: React.ComponentProps) { return ( ) } export { Separator } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" 'use client' import * as React from 'react' import * as TabsPrimitive from '@radix-ui/react-tabs' import { cn } from '@/lib/utils' function Tabs({ className, ...props }: React.ComponentProps) { return ( ) } function TabsList({ className, ...props }: React.ComponentProps) { return ( ) } function TabsTrigger({ className, ...props }: React.ComponentProps) { return ( ) } function TabsContent({ className, ...props }: React.ComponentProps) { return ( ) } export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescript:file="lib/utils.ts" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="next.config.mjs" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "eslint .", "start": "next start" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "latest", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.2.4", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { '@tailwindcss/postcss': {}, }, } export default config [V0_FILE]css:file="styles/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="tsconfig.json" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]png:file="public/circle-fedex-icon-png-logo-12.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_h5HbWQsJaxFCffdr661ZFonGWnDD/-Ga0v0v3qbn6qy7BNUM6jj/public/circle-fedex-icon-png-logo-12.png" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_h5HbWQsJaxFCffdr661ZFonGWnDD/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_h5HbWQsJaxFCffdr661ZFonGWnDD/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_h5HbWQsJaxFCffdr661ZFonGWnDD/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_h5HbWQsJaxFCffdr661ZFonGWnDD/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_h5HbWQsJaxFCffdr661ZFonGWnDD/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" [V0_FILE]jpg:file="public/product-image.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_h5HbWQsJaxFCffdr661ZFonGWnDD/xgjwZK-CW3tE0bmDTzhpQi/public/product-image.jpg"

Delivered

Order Information

Package Details

Delivery Address

Delivery Instructions

Delivery Confirmed

About

Tags

Share

About

Tags

Share

More from jason-uxui

More Templates Like This

About

Tags

Share

About

Tags

Share

More from jason-uxui

More Templates Like This